<template>
	<view class="list-customer">
		<view class="pop-title">
			<view class="inner">选择责任人</view>
		</view>
		<u-search placeholder="请输入" v-model="keyword" @clear="handlerFilter" @search="handlerFilter" @custom="handlerFilter"></u-search>
		<uni-list v-if="filterList.length > 0">
			<radio-group @change="radioChange">
				<uni-list-item v-for="(v, k) in filterList" :key="k">
					<view slot="header" class="hd">
						<view class="item-title">{{ v.realname }}</view>
					</view>

					<radio slot="footer" :value="v.userId + ''" :checked="v.userId == radio" />
				</uni-list-item>
			</radio-group>
		</uni-list>
		<u-empty v-if="page >= 1 && !filterList.length" text="数据为空" mode="list"></u-empty>
		<view class="btn">
			<view class="inner">
				<u-button type="primary" @click="selected">选好了</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'listUser',
	data() {
		return {
			// 搜索词
			keyword: '',
			// 选中的值
			radio: '',
			selectValue: '',
			// 第几页
			page: 1,
			// 每页显示数量
			limit: 10,
			// 列表数据
			list: [],
			// 筛选后的列表
			filterList: [],
		};
	},
	watch: {
		keyword(val) {
			this.handlerFilter();
		},
	},
	mounted() {
		this.getList();
	},
	methods: {
		// 获取列表
		async getList() {
			let data = {
				pageType: 0,
			};
			let res = await this.$api.common.userList(data);
			if (res.code === 200) {
				let list = res.data || [];
				if (this.page === 1) {
					this.list = list;
				} else {
					this.list.push(...list);
				}

				// 赋值筛选列表
				this.filterList = list;
			}
		},
		// 筛选列表
		handlerFilter() {
			if (!this.keyword.trim()) {
				this.filterList = this.list;
				return;
			}
			// 简单筛选
			this.filterList = this.list.filter((v) => {
				return v.realname.indexOf(this.keyword) >= 0 || v.realname == this.keyword;
			});
		},
		// 加载更多
		loadmore() {
			this.page++;
			this.getList();
		},
		// radio改变设置值
		radioChange(data) {
			this.selectValue = data.detail.value;
		},
		// 选好了
		selected() {
			if (!this.selectValue) {
				uni.showToast({
					icon: 'none',
					title: '请选择客户',
				});
				return;
			}
			let res = this.list.find((v) => v.userId == this.selectValue);
			this.$emit('selected', res);
		},
	},
};
</script>

<style lang="scss" scoped>
.list-customer {
	.pop-title {
		height: 40px;
		.inner {
			background: #fff;
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			height: 40px;
			line-height: 40px;
			font-size: 18px;
			text-align: center;
			z-index: 3;
		}
	}
	.u-search,
	.uni-list {
		margin: 10px 15px !important;
	}

	.uni-list /deep/ {
		margin-bottom: 50px;
		.uni-list-item {
			font-size: 14px;
		}
		.uni-list-item__container {
			padding: 12px 0;
			.hd {
				flex: 1;
			}
		}
		.uni-list-item__content {
			display: none;
		}
		.u-col {
			padding: 0 !important;
			color: #666;
		}
		.uni-radio-wrapper {
			transform: scale(0.7);
		}
	}

	.btn {
		height: 60px;
		.inner {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 20;
			background: #fff;
			padding: 10px 15px;
		}
	}
	.u-load-more-wrap {
		padding: 20px 0;
	}
}
</style>